<template>
  <div>
    <avue-form
      :option="option"
      ref='crud'
      v-model="form">
    </avue-form>
    <div class="center mt">
      <el-button icon="el-icon-circle-close" size="mini" @click="$emit('close')">取 消</el-button>
      <el-button icon="el-icon-circle-plus-outline" v-if="type=='add'" v-loading="goon" size="mini" @click.stop="saveAndGoon()">保存并继续</el-button>
      <el-button icon="el-icon-circle-plus-outline" :loading="saveLoading" type="primary" v-show="type!='view'" size="mini" @click="saveFn">保 存</el-button>
    </div>
  </div>
</template>

<script>
import {
  getMaterialgroupPage,
  addMaterialgroup,
  removeMaterialgroup,
  updateMaterialgroup,
  getMaterialgroup,
} from '@/api/project/productData/baseData';
import { mapGetters } from 'vuex';
import { init } from '@/mixins/init';
import { twoLetterReg } from '@/util/zhengze';
import { searchSpan, culomnSpan } from '@/api/span';
import * as product from "@/api/project/productData/product";
export default {
  props:['type','row'],
  data() {
    return {
      form:{},
      saveLoading:false,
      goon:false,
      option: {
        emptyBtn:false,
        submitBtn:false,
        labelPosition:'top',
        column: [
          {
            label: '零件组编码',
            prop: 'materialGroupNo',
            span: 24,
            disabled:false,
            labelWidth: '100',
            maxlength: 2,
            rules: [
              {
                required: true,
                message: '请输入零件组编码',
                trigger: 'blur',
              },
              {
                pattern: twoLetterReg,
                message: '零件编码由大写字母或数字组成，共两位',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '零件组名称',
            prop: 'materialGroupName',
            disabled:false,
            span: 24,
            minWidth: 150,
            labelWidth: '100',
            maxlength: 40,
            rules: [
              {
                required: true,
                message: '请输入零件组名称',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '零件类型',
            prop: 'materialFlagType',
            span: 24,
            minWidth: 150,
            labelWidth: '100',
            type: 'cascader',
            disabled:false,
            dicUrl: '/api/materialgroup/getTree?code=materials',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
            rules: [
              {
                required: true,
                message: '请选择零件类型',
                trigger: 'blur',
              },
            ],
          },
          // {
          //   label: '零件组分类',
          //   prop: 'materialGroupType',
          //   span: 24,
          //   minWidth: 150,
          //   labelWidth: '100',
          //   type: 'select',
          //   dicUrl: '/api/blade-system/dict-biz/dictionary?code=materialGroupType',
          //   props: {
          //     label: 'dictValue',
          //     value: 'dictKey',
          //   },
          //   rules: [
          //     {
          //       required: true,
          //       message: '请选择零件组分类',
          //       trigger: 'blur',
          //     },
          //   ],
          // },
        ],
      },
      data: [],
    };
  },
  watch: {},
  computed: {
    ...mapGetters(['userInfo', 'permission']),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.materialgroup_add, false),
        viewBtn: this.vaildData(this.permission.materialgroup_view, false),
        delBtn: this.vaildData(this.permission.materialgroup_delete, false),
        editBtn: this.vaildData(this.permission.materialgroup_edit, false),
      };
    },
  },
  mounted() {},
  // created() {
  //   this.onLoad(this.page);
  // },
  methods: {
    rowSave(row, done, loading) {
      row.materialFlag = row.materialFlagType[0];
      row.materialType = row.materialFlagType[1];
      addMaterialgroup(row).then(
        () => {
          if (this.goon) {
            loading();
            for (let key in this.$refs.crud.value) {
              this.$refs.crud.value[key] = null;
            }
            this.goon = false;
            this.onLoad(this.page);
          } else {
            this.onLoad(this.page);
            done();
          }
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        },
        (error) => {
          this.goon = false;
          window.console.log(error);
          loading();
        }
      );
    },
    saveFn() {
      this.$refs.crud.validate((res,done) => {
        if (res) {
          let row= {
            ...this.form,
          }
          row.materialFlag = row.materialFlagType[0];
          row.materialType = row.materialFlagType[1];
          this.saveLoading = true;
          if(this.type == 'add'){
            addMaterialgroup(row).then(
              () => {
                this.$message({
                  type: 'success',
                  message: '操作成功!',
                });
                this.saveLoading = false;
                this.$emit('reload')
              },
            ).catch(()=>{
              done();
              this.saveLoading = false;
            });
          }else if(this.type == 'edit'){
            updateMaterialgroup(row).then(
              () => {
                this.$message({
                  type: 'success',
                  message: '操作成功!',
                });
                this.saveLoading = false;
                this.$emit('reload')
              },
            ).catch(()=>{
              done();
              this.saveLoading = false;
            });
          }

        }
      });
    },
    saveAndGoon() {
      this.$refs.crud.validate((res,done) => {
        if (res) {
          let row= {
            ...this.form,
          }
          row.materialFlag = row.materialFlagType[0];
          row.materialType = row.materialFlagType[1];
          this.goon = true;
          addMaterialgroup(row).then(
            () => {
              this.$message({
                type: 'success',
                message: '操作成功!',
              });
              this.$refs.crud.resetFields()
              this.$emit('closeAfter');
              this.goon = false;
              done();
            },
          ).catch(()=>{
            done();
            this.goon = false;
          });
        }
      });
    },
    rowUpdate(row, index, done, loading) {
      row.materialFlag = row.materialFlagType[0];
      row.materialType = row.materialFlagType[1];
      updateMaterialgroup(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
          done();
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
    },
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return removeMaterialgroup(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return removeMaterialgroup(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen() {
      let type = this.type;
      if (['edit', 'view'].includes(type)) {
        if(type == 'view'){
          this.option.column.forEach((item, index) => {
            item.disabled = true;
          });
        }else{
          this.option.column.forEach((item, index) => {
            item.disabled = false;
          });
        }
        getMaterialgroup(this.form.id).then((res) => {
          let data = res.data.data;
          data.materialFlagType = [data.materialFlag, data.materialType];
          this.form = data;
          this.form.status = data.status + '';
        });
      } else {
        this.form.status = '1';
      }
    },
  },
  created() {
    if(this.type !='add'){
      this.form = {
        ...this.row,
      }
    }
    this.beforeOpen()
  }
};
</script>

<style>
.box {
  height: 800px;
}

.el-scrollbar {
  height: 100%;
}

.box .el-scrollbar__wrap {
  overflow: scroll;
}
</style>
